import React, { PropTypes, Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Link } from 'react-router'
import Table from './Table'
import NavLink from './NavLink'
import {myAjax, ROOTURL} from './../publicAPI/publicAPI'
import style from './addStore.css'

class Areamanager extends Component {

    constructor(props, context) {
        super(props, context)
        console.log("初始化");
        this.state = {
            delete: false,
            deleteId: -1,
            adminList : []
        };// 初始化状态

        var url = ROOTURL + 'user/base/search.api';
        var _this = this ;
        fetch(url, {
            method : 'POST',
            mode: 'cors',
            body: JSON.stringify({
            	"where":{"clazz":[["eq",".radm"]]}
            })
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    console.log(data);
                    console.log(res);
                    _this.setState({
                        adminList:data
                    })
                })
            }else{
                alert("获取区域管理员列表失败")
            }
        })

    }

    componentWillMount() {
        console.log("将安装")
    }

    componentDidMount() {
        console.log("安装成功")
    }

    handleDelete(id){
        this.setState({
            delete: !this.state.delete,
            deleteId : id
        });
    }

    doDelete(){
        var _this = this;
        var url = ROOTURL + 'user/general/instance.api?id=' + this.state.deleteId;
        fetch(url,{
            method: 'delete',
            body: JSON.stringify({})
        }).then(function (res) {
            if (res.ok){
                alert('删除成功');
                console.log(res);
                location.href = '/Areamanager';
            }else{
                console.log(res)
            }
        });
        this.setState({
            delete: !this.state.delete
        });

   
    }

    
    tHead() {
        var data = [
            {name: "id"},
            {name: "用户名"},
            {name: "操作"}
        ];
        const _headArr = [];
        const _width = {
            "0": "25%",
            "1": "25%",
            "2": "50%",
        };
        _headArr.push(data.map((item, index) => <th style={{width: _width[index]}} role="1"
                                                    key={index}>{item.name}</th>));
        return _headArr;
    }

    tBody() {
        var _this=this
        return this.state.adminList.map(function(item){
        if(!(item.dd)){
        return <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.dname}</td>

            <td>
                <span><NavLink to={`/Areamanager/AreamanagerEditor/${item.id}`} className="rbtn green">查看</NavLink></span>
                <span style={{marginLeft: "15px"}}><a className="rbtn red"
                                                      onClick={()=>_this.handleDelete(item.id)}>删除</a></span>
                <span style={{marginLeft: "15px"}}><NavLink to={`/Areamanager/AreamanagerEditorShop/${item.id}`} className="rbtn green">管辖门店</NavLink></span>
            </td>
        </tr>}
    }
    )
    }

    render() {
        return (
            <div className="right-wapper">
                <div className="rt-wrap">
                    <h2 className="catagory">
                        <span className="cata-title">区域管理员账号管理</span>
                        <Link to={`/Areamanager/AreamanagerEditor`}>
                            <button className="add-btn"/>
                        </Link>
                    </h2>
                    <Table tHead={this.tHead.bind(this)()} tBody={this.tBody.bind(this)()}/>
                </div>
                { this.state.delete ?
                    <div id={style["msgDialog"]}>
                        <div className={style["msgDialog_div"]}><h3 id={style["msgDialog_title"]}>删除提示？</h3><p id={style["msgDialog_content"]}>
                            确认删除？</p>
                            <div className={style["msgDialog_button"]}>
                                <button id={style["msgDialog_yes"]} onClick={this.doDelete.bind(this)}>确定</button>
                                <button id={style["msgDialog_no"]}
                                        onClick={()=>this.setState({delete: !this.state.delete})}>
                                    取消
                                </button>
                            </div>
                        </div>
                    </div> : null}
            </div>

        )
    }
}

export default Areamanager
